<template>
	<view class="u-margin-left-26 u-margin-right-26">
	<view class="content">
			<view class="zr">
				<view class="water">
					<view class="water-c">
						<view class="water-1"> </view>
						<view class="water-2"> </view>
					</view>
				</view>
			</view>
		</view>
	<u-form ref="ufrom" :model="user">
		<u-form-item left-icon = "account" label="姓名"label-width='120' prop="zhanghao">
		<u-input type="text" placeholder="请输入姓名" v-model="user.zhanghao"></u-input>
		</u-form-item>
	    <u-form-item left-icon = "lock" label="密码"label-width='120' prop="mima">
	    <u-input type="password" placeholder="请输入密码" :password-icon="passwordIcon" v-model="user.mima"></u-input>
	    </u-form-item>
	
		 <u-switch slot='right'></u-switch>
     </u-form-item>
	</u-form>
	<u-button @click="submit">登录</u-button>
	<u-button @click="register">注册</u-button>
	<view class="u-demo-area">
		<u-link :color='color' :font-size="fontsize" :href="href" :under-line='underline'>注册</u-link>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//控制是否显示密码
				passwordIcon:true,
				//颜色
				color:'#00ffff',
				href:"http://www.baidu.com",
				underline:true,
			    fontsize:28,
				//form表单关联
				user:{
					zhanghao:"",
					mima:""
				},
				//添加一个规则
				rules:{
					zhanghao:[
						{
							required: true,
							message:"请输入用户名",
							trigger:['change','blur']
						}
					]
				}
			}
		},
		
		onReady(){
			this.$refs.ufrom.setRules(this.rules);
		},
		methods: {
			//点击事件
			submit(){
				//打印
				console.log("登录");
				//网络提交数据
				uni.request({
					//地址
					url:"http://localhost:8080/dologin",
					//请求方式
					method:"POST",
					//请求发送数据
					data:this.user,
					//返回数据
					success:(res)=>{
						console.log(res);
						//成功code是200，保存用户信息，跳转到个人信息
						//失败是201,提示用户名或者密码错误
						if(res.data.code*1==200){
							//保存
							uni.setStorageSync("user",res.data.result);
							uni.navigateBack();//退回到上一个页面
						}else{
							//失败
							this.$u.toast("登录失败，用户名或者密码错误");
						}
						
					}
				});
				//
				//
				
			},
			register(){
				console.log("注册");
				//跳转到注册页面
				uni.navigateTo({
					url:"/pages/XJX_pages/register"
				})
			}
		}
	}
</script>

<style>
	.zr {
			color: white;
			background: #77eef6;
			width: 100%;
			height: 60upx;
			position: relative;
		}
	
		.water {
			position: absolute;
			left: 0;
			bottom: -10upx;
			height: 30upx;
			width: 100%;
			z-index: 1;
		}
	
		.water-c {
			position: relative;
		}
	
		.water-1 {
			background: url("") repeat-x;
			background-size: 600upx;
			animation: wave-animation-1 4.5s infinite linear;
		}
	
		.water-2 {
			top: 5upx;
			background: url("") repeat-x;
			background-size: 600upx;
			animation: wave-animation-2 8s infinite linear;
		}
	
		.water-1,
		.water-2 {
			position: absolute;
			width: 100%;
			height: 60upx;
		}
	
		.back-white {
			background: #fff;
		}
	
		@keyframes wave-animation-1 {
			0% {
				background-position: 0 top;
			}
	
			100% {
				background-position: 600upx top;
			}
		}
	
		@keyframes wave-animation-2 {
			0% {
				background-position: 0 top;
			}
	
			100% {
				background-position: 600px top;
			}
		}
	
  .u-demo-area{
	  cursor: pointer;
  }
</style>
